<template>
  <div class="skeleton-loader" :class="{ 'skeleton-loader--animated': animated }">
    <!-- 卡片骨架 -->
    <div v-if="type === 'card'" class="skeleton-card">
      <div class="skeleton-card__image skeleton-shimmer"></div>
      <div class="skeleton-card__content">
        <div class="skeleton-line skeleton-shimmer" style="width: 80%"></div>
        <div class="skeleton-line skeleton-shimmer" style="width: 60%"></div>
        <div class="skeleton-line skeleton-shimmer" style="width: 90%"></div>
      </div>
    </div>

    <!-- 列表骨架 -->
    <div v-else-if="type === 'list'" class="skeleton-list">
      <div v-for="i in rows" :key="i" class="skeleton-list-item">
        <div class="skeleton-avatar skeleton-shimmer"></div>
        <div class="skeleton-list-content">
          <div class="skeleton-line skeleton-shimmer" style="width: 70%"></div>
          <div class="skeleton-line skeleton-shimmer" style="width: 50%"></div>
        </div>
      </div>
    </div>

    <!-- 文章骨架 -->
    <div v-else-if="type === 'article'" class="skeleton-article">
      <div class="skeleton-line skeleton-shimmer" style="width: 60%; height: 32px; margin-bottom: 16px"></div>
      <div class="skeleton-line skeleton-shimmer" style="width: 40%; margin-bottom: 24px"></div>
      <div class="skeleton-article__image skeleton-shimmer"></div>
      <div class="skeleton-line skeleton-shimmer" style="width: 100%"></div>
      <div class="skeleton-line skeleton-shimmer" style="width: 95%"></div>
      <div class="skeleton-line skeleton-shimmer" style="width: 98%"></div>
      <div class="skeleton-line skeleton-shimmer" style="width: 85%"></div>
    </div>

    <!-- 表格骨架 -->
    <div v-else-if="type === 'table'" class="skeleton-table">
      <div class="skeleton-table-header">
        <div v-for="i in columns" :key="i" class="skeleton-line skeleton-shimmer"></div>
      </div>
      <div v-for="i in rows" :key="i" class="skeleton-table-row">
        <div v-for="j in columns" :key="j" class="skeleton-line skeleton-shimmer"></div>
      </div>
    </div>

    <!-- 自定义骨架 -->
    <div v-else-if="type === 'custom'">
      <slot></slot>
    </div>

    <!-- 默认骨架 -->
    <div v-else class="skeleton-default">
      <div v-for="i in rows" :key="i" class="skeleton-line skeleton-shimmer" :style="{ width: getRandomWidth() }"></div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  // 骨架类型
  type: {
    type: String,
    default: 'default',
    validator: (value) => ['default', 'card', 'list', 'article', 'table', 'custom'].includes(value)
  },
  // 行数（用于 list、table、default）
  rows: {
    type: Number,
    default: 3
  },
  // 列数（用于 table）
  columns: {
    type: Number,
    default: 4
  },
  // 是否显示动画
  animated: {
    type: Boolean,
    default: true
  }
})

const getRandomWidth = () => {
  const widths = ['60%', '70%', '80%', '90%', '100%']
  return widths[Math.floor(Math.random() * widths.length)]
}
</script>

<style lang="scss" scoped>
.skeleton-loader {
  width: 100%;
}

// 闪烁动画
.skeleton-shimmer {
  background: linear-gradient(
    90deg,
    var(--bg-secondary) 0%,
    var(--bg-tertiary, rgba(0, 0, 0, 0.05)) 50%,
    var(--bg-secondary) 100%
  );
  background-size: 200% 100%;
  
  .skeleton-loader--animated & {
    animation: shimmer 1.5s infinite;
  }
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

// 基础线条
.skeleton-line {
  height: 16px;
  border-radius: $radius-sm;
  margin-bottom: $spacing-sm;
}

// 卡片骨架
.skeleton-card {
  border-radius: $radius-lg;
  overflow: hidden;
  background: var(--bg-primary);
  box-shadow: var(--shadow-sm);
  
  &__image {
    width: 100%;
    height: 200px;
  }
  
  &__content {
    padding: $spacing-lg;
  }
}

// 列表骨架
.skeleton-list {
  display: flex;
  flex-direction: column;
  gap: $spacing-md;
}

.skeleton-list-item {
  display: flex;
  gap: $spacing-md;
  padding: $spacing-md;
  background: var(--bg-primary);
  border-radius: $radius-md;
}

.skeleton-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  flex-shrink: 0;
}

.skeleton-list-content {
  flex: 1;
}

// 文章骨架
.skeleton-article {
  padding: $spacing-xl;
  background: var(--bg-primary);
  border-radius: $radius-lg;
  
  &__image {
    width: 100%;
    height: 300px;
    border-radius: $radius-md;
    margin-bottom: $spacing-lg;
  }
}

// 表格骨架
.skeleton-table {
  background: var(--bg-primary);
  border-radius: $radius-lg;
  overflow: hidden;
}

.skeleton-table-header {
  display: grid;
  grid-template-columns: repeat(v-bind(columns), 1fr);
  gap: $spacing-md;
  padding: $spacing-lg;
  background: var(--bg-secondary);
  
  .skeleton-line {
    height: 20px;
  }
}

.skeleton-table-row {
  display: grid;
  grid-template-columns: repeat(v-bind(columns), 1fr);
  gap: $spacing-md;
  padding: $spacing-lg;
  border-bottom: 1px solid var(--border-color);
  
  &:last-child {
    border-bottom: none;
  }
}

// 默认骨架
.skeleton-default {
  padding: $spacing-lg;
}
</style>

